<template>
	<view class="blind-box-prize">
		<view class="no_info" v-if="dataList.length == 0" style="height: auto;">
			<image src="@/static/null_img.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
		<view class="box-prize-list" v-else>
			<view class="box-prize-li" v-for="(item,index) in dataList" :key="index">
				<image  class="li-left-dj" :src="ImageList[item.level-1]" mode=""></image>
				<view class="li-left">
					<image  :src="item.img" mode=""></image>
				</view>
				<view class="li-right">
					<view class="right-top">
						<view class="title ellipseHide_two">
							{{item.name}}
						</view>
						 <view class="probability">
						 	概率{{item.showRatio}}%
						 </view>
					</view>
					<view class="right-botton">
						价值{{item.worth}}元 <block v-if="item.validity!=''">({{item.validity}})</block> 
					</view>
				</view>
				
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view @click="jumpBlindbox" class="but" >继续开盲盒</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					// {id:1,name:'',status:false},
					// {id:2,name:'',status:false},
					// {id:3,name:'',status:false},
				],
				ImageList:[
					'/static/blindbox/my-prize-ssr.png',
					'/static/blindbox/my-prize-sr.png',
					'/static/blindbox/my-prize-r.png',
					'/static/blindbox/my-prize-a.png',
					'/static/blindbox/my-prize-b.png',
				],
				// more/loading/noMore
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				id:'',//盲盒活动id
				type:'',
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.getDataList()
		},
		methods: {
			jumpBlindbox(){
				window.location.href =  "/pages/pay/blindbox?id=" + this.id + '&type=' + this.type
			},
			async getDataList() {
				uni.showLoading({ title:'加载中' })
				this.moreStatus = 'loading'
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					boxActivityId: this.id
				}
				const res = await this.$api.getPrizeList(data);
				uni.hideLoading()
				this.listTotal = res.result.total
				
				if (this.pageNum > 1) {
					this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
				} else {
					this.dataList = res.result.records
				}
			
				console.log(this.dataList)
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				  console.log('分页结束')
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
		background: #F6F6F6;
	}
	.blind-box-prize{
		width: 100%;
		height: 100%;
		background: url('/static/blindbox/blind-box-prize-bg.png') no-repeat;
		background-size: 100% auto;
	}
	.box-prize-list{
		padding-top: 238rpx;
	}
	.box-prize-li{
		width: 345px;
		box-sizing: border-box;
		margin: 0 auto;
		padding:24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 24rpx;
		position: relative;
	}
	.li-left{
		/* margin-right: 28rpx; */
	}
	.li-left-dj{
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		top: 14rpx;
		left: 20rpx;
		z-index: 3;
	}
	.li-left image{
		width: 104rpx;
		height: 104rpx;
		border-radius: 12rpx;
	}
	.li-right{
		flex: 1;
		margin-left: 12px;
	}
	.right-top{
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.right-top .title{
		/* width: 384rpx; */
		font-size: 30rpx;
		margin-right: 10rpx;
		color: #222222;
		flex: 1;
	}
	.right-top .probability{
		color: #FF2121;
		font-size: 24rpx;
	}
	.right-botton{
		font-size: 24rpx;
		line-height: 34rpx;
		color: #666666;
	}
	.but{
		width: 402rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF9A3D 3.08%, #FD5D04 100%);
		box-shadow: 0px 8rpx 10rpx rgba(255, 96, 11, 0.2);
		border-radius: 152rpx;
		font-size: 34rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
